<template>
  <page-wrap :show-top="true" :customWrapStyle="customWrapStyle" :title="name" back hideTab :hideSafeArea="true"
    txtColor="#222" bgColor="transparent" class="pageWrap">
    <!--  职业顾问管理页面      -->
    <view class="article" :style="'padding-top:' + navHeight + 'px;'" type="line">
      <view class="search">
        <!-- :search-icon="searchIcon" -->
        <u-search placeholder="搜索该职业职说" placeholder-color="#b2b2b2" class="library-u-search" v-model="keyword"
          height="80" bg-color="#ffffff" :search-icon="searchIcon" :show-action="showRightSearchText"
          @search="handleSearch" @custom="handleSearch" @blur="closeSearchText" @focus="showSearchText"
          maxlength="20"></u-search>
      </view>
      <scroll-view class="article-list" :scroll-top="scrollTop" scroll-y :scroll-anchoring="false" refresher-enabled
        :refresher-triggered="triggered" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
        @scrolltolower="loadMore" lower-threshold='100'>
        <VideoItem class="list-item" v-for="item in dataList" 
        :key="item.articleId" 
        :item="item" 
        :relatedType="relatedType"
        :positionId="positionId"></VideoItem>

        <u-loadmore v-if="dataList.length || !loaded" class="list-more" :status="moreLoading" :load-text="loadText" />
        <Empty v-if="loaded && !dataList.length" :baseImg="emptyImg" text="暂无相关职说" textColor="#888" :fontWeight="400" />
      </scroll-view>
    </view>
  </page-wrap>
</template>

<script>
import VideoItem from "@/components/VideoItem";
import Empty from "@/components/Empty.vue";
import { getSearchJobSay } from "@/api/modules/career";
import ShareMixin from "@/mixins/share";
import ReportShareMixin from "@/mixins/reportShare";

export default {
  mixins: [ShareMixin, ReportShareMixin],
  components: {
    Empty,
    VideoItem,
  },
  data() {
    return {
      relatedType:2,
      navHeight: 0,
      personId: uni.getStorageSync("person-id").slice(2) || "",
      searchIcon: this.$imgBaseSelf + "common/search_gray.png",
      scrollTop: 0,
      showRightSearchText: false,
      name: "",
      options: {},
      dataList: [],
      loaded: false,
      triggered: false,
      _triggered: false,
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      keyword: "",
      moreLoading: "loadmore",
      pageParams: {
        pageNo: 0,
        pageSize: 20,
        finished: false,
        loading: false,
      },
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      selectedItem: {},
      showDeleteModal: false,
      deleteData: "",
      deleteIndex: "",
      deleteType: "",
      moreLayerId: "",
      moreLayerType: "",
      positionId:'', 
    };
  },
  created() {
    this.navHeight = getApp().globalData.navHeight;
  },
  onLoad(opt) {
    this.options = opt;
    this.name = this.options.name + "·职说";
    this.positionId = this.options.positionId +'';
    this.shareTitle = this.name;
    this.moreLayerId = opt.moreLayerId;
    this.moreLayerType = opt.moreLayerType;
    this.shareQuery = `positionId=${this.options.positionId}&name=${this.options.name}&moreLayerId=${this.options.moreLayerId}&moreLayerType=${this.options.moreLayerType}`
    this.sharePath = `/pagesSub/career/moreJobVideo/index?${this.shareQuery}`;
    this.shareContent.contentType = '41'
  },
  mounted() {
    this.getData();
  },
  methods: {
    // onShareTimeline() {
    //   return {
    //     title: this.shareTitle, // 标题
    //     path: "/pagesSub/career/moreJobVideo/index", // 分享路径
    //     query: `positionId=${this.options.positionId}&name=${this.options.name}&title=${this.options.title}&moreLayerId=${this.options.moreLayerId}&moreLayerType=${this.options.moreLayerType}`,
    //   };
    // },
    showSearchText() {
      this.showRightSearchText = true;
    },
    closeSearchText() {
      this.showRightSearchText = false;
    },
    getData(isMore) {
      if (this.moreLoading == "loading" || this.moreLoading == "nomore") return;
      const params = {
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        keyword: this.keyword,
        personId: this.personId || 1,
        layerId: this.moreLayerId,
        layerType: this.moreLayerType,
        positionId: this.options.positionId,
      };
      this.moreLoading = "loading";

      getSearchJobSay(params)
        .then((res) => {
          console.log("getSearchJobSay------->", res);
          this.pageParams.loading = false;
          this.moreLoading = "loadmore";
          this.loaded = true;
          if (res && res.code == 200) {
            if (isMore) {
              console.log("xxxxxx刷新了xxxxxxx------->", res);
              this.dataList.push(...res.data);
            } else {
              this.dataList = res.data;
            }
            if (this.pageParams.pageNo >= res.pageparam.pages) {
              this.moreLoading = "nomore";
            }
            this.pageParams.pageNo++;
          } else {
            this.moreLoading = "nomore";
            uni.showToast({
              title: res.status_desc,
              icon: "none",
              duration: 2000
            });
          }
        })
        .finally(() => {
          this.triggered = false;
          this._triggered = false;
        });
    },
    handleSearch() {
      this.onRefresh();
    },
    loadMore() {
      this.getData(true);
    },
    onRestore() {
      this.triggered = false;
      this._triggered = false;
    },
    onRefresh() {
      if (this.scrollTop == 0) {
        this.scrollTop = 0.1;
      } else {
        this.scrollTop = 0;
      }
      if (this._triggered) return;
      this._triggered = true;

      if (!this.triggered) {
        this.triggered = true;
      }
      this.loaded = false;
      this.moreLoading = "loadmore";
      this.pageParams.pageNo = 0;
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.article {
  background-image: url($img-base + "career/jobList_bg.png");
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;

  .search {
    display: flex;
    padding: 12rpx 32rpx 32rpx 32rpx;
    border-radius: 18px;
    ::v-deep.u-content {
      padding: 0 20rpx 0rpx 32rpx;
    }
    ::v-deep.u-close-wrap {
      transform: scale(1.5);
    }

    ::v-deep.u-icon__img {
      width: 40rpx;
      height: 40rpx;
    }
    .library-u-search {
      flex: 1;
      width: 686rpx;
      height: 72rpx;
    }
  }

  &-list {
    height: calc(100vh - 180px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    flex-grow: 1;
    width: 702rpx;
    margin: auto;
  }
}
</style>
